<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Forms with input elements</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="this is a test page for forms with input elements" />
    <link rel="stylesheet" href="watirspec.css" type="text/css" media="screen" title="no title" charset="utf-8" data-locator="link">
    <script src="javascript/helpers.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body data-locator="body" onload="document.user_new.new_user_first_name.focus()">
  <div id="messages" class="multiple classes here" random="foo" data-locator="first div"></div>
  <div id="there" class="multiple classes there" data-locator="second div"></div>
    <h1><a href="">User administration</a></h1>
    <h2 data-locator="add user" style="background-color: gray;">Add user</h2>
    <form enctype="multipart/form-data" action="post_to_me" method="post" name="user_new" id="new_user" class="user"
          data-locator="form" onsubmit="WatirSpec.addMessage('submit'); return false;">
        <fieldset>
            <input type="hidden" data-locator="input nameless"/> <!-- Ensure it's not included in #text_field -->
            <legend>Personal information</legend>
            <label for="new_user_first_name" id="first_label" onclick="WatirSpec.addMessage('label')">First name</label>
            <input name="new_user_first_name" id="new_user_first_name" class="name" data-locator="input name"/> <br />
            <label for="new_user_last_name">Last name</label>
            <input type="no_such_type" name="new_user_last_name" id="new_user_last_name" class="name" data-locator="last name"/> <br />
            <label for="new_user_email">Email address</label>
            <input type="text" name="new_user_email" id="new_user_email" data-locator="first text" contenteditable=""/> <br />
            <label for="new_user_email_confirm">Email address (confirmation)</label>
            <input type="Text" name="new_user_email_confirm" id="new_user_email_confirm" /> <br />
            <label for="new_user_country">Country</label>
            <select name="new_user_country" id="new_user_country" class="country">
                <optgroup label="nordic">
                  <option class="scandinavia" value="1">Denmark</option>
                  <option id="nor" class="scandinavia" value="2" selected="selected">Norway</option>
                  <option class="scandinavia" value="3">Sweden</option>
                </optgroup>
                <optgroup label="other">
                  <option value="4">United Kingdom</option>
                  <option value="5">USA</option>
                  <option label="Germany" data-locator="Berliner" />
              </optgroup>
            </select> <br />
            <label for="new_user_occupation">Occupation</label>
            <input type="text" class="c" name="new_user_occupation" data-locator="dev" id="new_user_occupation" value="Developer" onfocus="document.getElementById('onfocus_test').innerHTML = 'changed by onfocus event'"/> <br />
            <label>Without for <input /></label>
            <label>With<span style="display:none;"> hidden</span> text<input data-locator="hidden" /></label>
            <label for="new_user_species">Species</label>
            <input type="text" name="new_user_species" id="new_user_species" value="Homo sapiens sapiens" disabled="disabled" /> <br />
            <label for="new_user_code">Personal code</label>
            <input type="text" title="Your personal code" name="new_user_code" id="new_user_code" value="HE2FF8" readonly="readonly" /> <br  />
            <label for="good_luck">Good Luck</label>
            <input type="text" title="Good Luck" name="good_luck" id="good_luck" disabled="disabled" readonly="readonly" data-locator="Good Luck" /> <br  />
            <input type="col" id="unknown_text_field" data-locator="unknown" /> <br />
            <label for="new_user_languages">Languages</label>
            <select name="new_user_languages" id="new_user_languages" multiple="multiple" onchange="WatirSpec.addMessage('changed language');">
                <option id="danish" value="1">Danish</option>
                <option selected="selected" value="2" label="EN">English</option>
                <option selected="selected" value="3" label="NO">Norwegian</option>
                <option value="4" disabled>Russian</option>
                <option>Swedish</option>
                <option>Azeri - Latin</option>
                <option>Latin</option>
            </select> <br />
            <label for="new_user_portrait">Portrait</label>
            <input type="file" name="new_user_portrait" id="new_user_portrait" class="portrait" title="Smile!" onchange="WatirSpec.addMessage(this.value)" /> <br />
            <!-- <input type="file" name="new_user_portrait" id="new_user_portrait" class="portrait" title="Smile!" onchange="document.getElementById('changed_language').innerHTML = 'File onchange triggered'" /> <br /> -->
            <label for="new_user_teeth">Dental records</label>
            <input type="file" name="new_user_teeth" id="new_user_teeth" title="Smile here too!" />
            <label for="new_user_resume">Resume</label>
            <input type="File" name="new_user_resume" id="new_user_resume" title="Shows us your resume!" />
            <label for="html5_email">HTML5 Email</label>
            <input type="email" id="html5_email" name="html5_email" />
            <label for="html5_date">HTML5 Date</label>
            <input type="date" id="html5_date" name="html5_date" />
            <label for="html5_datetime">HTML5 Datetime</label>
            <input type="datetime" id="html5_datetime" name="html5_datetime" />
            <label for="html5_datetime-local">HTML5 Datetime Local</label>
            <input type="datetime-local" id="html5_datetime-local" name="html5_datetime-local" />
            <label for="html5_month">HTML5 Month</label>
            <input type="month" id="html5_month" name="html5_month" />
            <label for="html5_week">HTML5 Week</label>
            <input type="week" id="html5_week" name="html5_week" />
            <label for="html5_time">HTML5 Time</label>
            <input type="time" id="html5_time" name="html5_time" />
            <label for="number">Age</label>
            <input type="number" value="42" name="number" id="number" data-locator="42">
        </fieldset>
        <fieldset>
            <legend>Login information</legend>
            <label for="new_user_username">Username (max 20 characters)</label>
            <input type="text" name="new_user_username" id="new_user_username" maxlength="20" size="20" onkeyup="document.getElementById('current_length').innerHTML = this.value.length"/> <span id="current_length">0</span><br />
            <label for="new_user_password">Password</label>
            <input type="password" name="new_user_password" id="new_user_password" data-locator="last text"/> <br />
            <label for="new_user_role">Role</label>
            <select name="new_user_role" id="new_user_role" disabled="disabled">
                <option>Administrator</option>
                <option>Moderator</option>
                <option>Regular user</option>
            </select>
        </fieldset>
        <fieldset>
            <legend>Interests</legend>
            <input type="checkbox" tabindex="1" name="new_user_interests" id="new_user_interests_books" value="books" checked="checked" /> <label for="new_user_interests_books">Books</label>
            <input type="checkbox" tabindex="2" name="new_user_interests" value="bowling" /> <label>Bowling</label>
            <input type="checkbox" tabindex="3" name="new_user_interests" id="new_user_interests_cars" value="cars" data-locator="cars" /> <label for="new_user_interests_cars">Cars</label>
            <input type="checkbox" tabindex="4" name="new_user_interests" id="new_user_interests_dancing" value="dancing" class="fun" title="Dancing is fun!" /> <label for="new_user_interests_dancing">Dancing</label>
            <input type="checkbox" tabindex="5" name="new_user_interests" id="new_user_interests_dentistry" value="dentistry" disabled="disabled" /> <label for="new_user_interests_dentistry">Dentistry</label>
            <input type="hidden" name="new_user_interests" id="new_user_interests_dolls" value="dolls" class="fun" />
            <input type="checkbox" tabindex="6" id="new_user_interests_food" value="food" /> <label for="new_user_interests_food">Food</label>
            <input type="CHECKBOX" tabindex="7" id="new_user_interests_draw" value="Draw" /> <label for="new_user_interests_draw">Draw</label>
        </fieldset>
        <fieldset>
            <legend>Preferences</legend>
            <p>Do you want to recieve our newslettter?</p>
            <input type="radio" name="new_user_newsletter" id="new_user_newsletter_yes" value="yes" checked="checked" class="huge" onclick="WatirSpec.addMessage('clicked: ' + this.id)"/>
            <label for="new_user_newsletter_yes">Yes</label>
            <input type="radio" name="new_user_newsletter" id="new_user_newsletter_no" value="no" title="Traitor!" onclick="WatirSpec.addMessage('clicked: ' + this.id)" />
            <label for="new_user_newsletter_no">No</label>
            <input type="radio" name="new_user_newsletter" value="certainly" onchange="WatirSpec.addMessage('changed: ' + this.name)"/>
            <label>Certainly</label>
            <input type="radio" id="new_user_newsletter_absolutely" value="absolutely" />
            <label for="new_user_newsletter_absolutely">Absolutely</label>
            <input type="RADIO" name="new_user_newsletter" id="new_user_newsletter_probably" value="nah"/>
            <label for="new_user_newsletter_probably">Probably</label>
            <input type="radio" name="new_user_newsletter" id="new_user_newsletter_nah" value="nah" disabled="disabled" />
            <label for="new_user_newsletter_nah">Nah</label>
            <input type="radio" id="new_user_newsletter_none" value="none" disabled="disabled" />
            <label for="new_user_newsletter_none">None</label>
        </fieldset>
        <fieldset>
            <legend>Actions</legend>
            <input type="submit" title="Submit the form" name="new_user_submit" data-locator="user submit" id="new_user_submit" value="Submit" />
            <input type="reset" name="new_user_reset" id="new_user_reset" value="Reset" data-locator="reset" />
            <input type="button" name="new_user_button" id="new_user_button" data-locator="new user" alt="Create a new user" value="Button" onclick="this.value = 'new_value_set_by_onclick_event'" />
            <input type="BuTTon" name="new_user_button_preview" id="new_user_button_preview" alt="Create a new user" value="Preview" data-locator="preview"/>
            <button name="new_user_button_2" type="submit" value="button_2" data-locator="Benjamin">Button 2</button>
            <button name="new_user_button_3" value="button_3" data-locator="No Type">Button 3</button>
            <button name="new_user_button_4" value="button_4" data-locator="child text">  Button 4  <span>  With  Child  Text  </span>  </button>
            <input type="image" class="image" name="new_user_image" src="images/button.png" alt="Submittable button" data-locator="submittable button"/>
            <input type="submit" name="new_user_submit_disabled" id="disabled_button" value="Disabled" disabled="disabled" data-locator="disabled" />
            <input type="checkbox" name="new_user_submit_disabled" id="toggle_button_checkbox" onclick="var elem = document.getElementById('disabled_button'); elem.disabled = !elem.disabled" />
        </fieldset>
    </form>
    <h2>Delete user</h2>
    <form id="delete_user" action="tables.html" method="POST">
        <fieldset>
            <label for="delete_user_username">Username</label>
            <select name="delete_user_username" id="delete_user_username">
                <option value=""></option>
                <option selected="selected">Username 1</option>
                <option>Username 2</option>
                <option onclick="elem = document.getElementById('delete_user_comment'); elem.value = 'Don\'t do it!'; elem.style.color = 'red';">Username 3</option>
            </select> <br />
            <label for="delete_user_comment">Comment</label>
            <textarea name="delete_user_comment" id="delete_user_comment">Default comment.</textarea> <br />
            <textarea name="create_user_comment" id="create_user_comment">Default comment.</textarea> <br />
            <input type="submit" name="delete_user_submit" id="delete_user_submit" value="Delete" style="border: 4px solid red;" />
        </fieldset>
    </form>

  <!-- testing popup windows  -->
  <input type="button" name="new_popup_window" value="Open window" id="new_popup_window" data-locator="last button" onclick="window.open('tables.html')">

  <!-- used for testing javascript events and styles -->
  <div id="changed_language" style="visibility: hidden;">
    <div id="hidden_parent"></div>
    <div id="visible_child" style="visibility: visible">shown div</div>
  </div>
  <div id="wants_newsletter" style="display: none;"></div>
  <div id="onfocus_test"></div>

  <div id="contenteditable" contenteditable="true" class="content" data-locator="content">Foo</div>

  <!-- option disappears onchange -->
  <select id="obsolete" onchange="this.innerHTML = '';">
    <option value="norway">norway</option>
    <option value="sweden">sweden</option>
  </select>

  <!-- single quote in attribute -->
  <select id="single-quote">
    <option>'foo'</option>
  </select>

  <fieldset id="visible_label">
      <label for="all_visible_label">all visible</label>
      <input type="checkbox" id="all_visible_label">

      <label for="some_visible_label">some visible<span style="display:none;"> some hidden</span></label>
      <input type="checkbox" id="some_visible_label">

      <label for="no_visible_label" style="display:none;">none visible</label>
      <input type="checkbox" id="no_visible_label">
  </fieldset>
  </body>
</html>
